import React from 'react';
import { Form, InputNumber, Radio, Select } from 'antd';
import CustomButton from './CustomButton';
import styles from './CDAIScore.less';

const CDAIScore: React.FC = () => {
  return (
    <div className={styles.cdaiScoreForm}>
      <Form layout="vertical">
        {/* 1. 最近一周稀便或水样便次数 */}
        <div className={styles.formSection}>
          <Form.Item 
            label={<span className={styles.sectionLabel}><span className={styles.numberBadge}>1</span>最近一周稀便或水样便次数<span className={styles.required}>*</span></span>} 
            name="looseStoolCount"
            rules={[{ required: true, message: '请填写稀便次数' }]}
          >
            <div className={styles.weeklyGrid}>
              <div className={styles.dayLabels}>
                <span>周一</span>
                <span>周二</span>
                <span>周三</span>
                <span>周四</span>
                <span>周五</span>
                <span>周六</span>
                <span>周日</span>
              </div>
              <div className={styles.inputRow}>
                <span className={styles.inputLabel} style={{width: 40}}>次数</span>
                <InputNumber style={{ width: 80 }} min={0} max={20} />
                <InputNumber style={{ width: 80 }} min={0} max={20} />
                <InputNumber style={{ width: 80 }} min={0} max={20} />
                <InputNumber style={{ width: 80 }} min={0} max={20} />
                <InputNumber style={{ width: 80 }} min={0} max={20} />
                <InputNumber style={{ width: 80 }} min={0} max={20} />
                <InputNumber style={{ width: 80 }} min={0} max={20} />
              </div>
            </div>
          </Form.Item>
        </div>

        {/* 2. 最近一周腹痛评分 */}
        <div className={styles.formSection}>
          <Form.Item 
            label={<span className={styles.sectionLabel}><span className={styles.numberBadge}>2</span>最近一周腹痛评分: 0=无, 1=轻, 2=中, 3=重<span className={styles.required}>*</span></span>} 
            name="abdominalPainScore"
            rules={[{ required: true, message: '请填写腹痛评分' }]}
          >
            <div className={styles.weeklyGrid}>
              <div className={styles.dayLabels}>
                <span>周一</span>
                <span>周二</span>
                <span>周三</span>
                <span>周四</span>
                <span>周五</span>
                <span>周六</span>
                <span>周日</span>
              </div>
              <div className={styles.inputRow}>
                <span className={styles.inputLabel} style={{width: 40}}>评分</span>
                <Select  style={{ width: 80 }}>
                  <Select.Option value="0">0</Select.Option>
                  <Select.Option value="1">1</Select.Option>
                  <Select.Option value="2">2</Select.Option>
                  <Select.Option value="3">3</Select.Option>
                </Select>
                <Select  style={{ width: 80 }}>
                  <Select.Option value="0">0</Select.Option>
                  <Select.Option value="1">1</Select.Option>
                  <Select.Option value="2">2</Select.Option>
                  <Select.Option value="3">3</Select.Option>
                </Select>
                <Select  style={{ width: 80 }}>
                  <Select.Option value="0">0</Select.Option>
                  <Select.Option value="1">1</Select.Option>
                  <Select.Option value="2">2</Select.Option>
                  <Select.Option value="3">3</Select.Option>
                </Select>
                <Select  style={{ width: 80 }}>
                  <Select.Option value="0">0</Select.Option>
                  <Select.Option value="1">1</Select.Option>
                  <Select.Option value="2">2</Select.Option>
                  <Select.Option value="3">3</Select.Option>
                </Select>
                <Select  style={{ width: 80 }}>
                  <Select.Option value="0">0</Select.Option>
                  <Select.Option value="1">1</Select.Option>
                  <Select.Option value="2">2</Select.Option>
                  <Select.Option value="3">3</Select.Option>
                </Select>
                <Select  style={{ width: 80 }}>
                  <Select.Option value="0">0</Select.Option>
                  <Select.Option value="1">1</Select.Option>
                  <Select.Option value="2">2</Select.Option>
                  <Select.Option value="3">3</Select.Option>
                </Select>
                <Select  style={{ width: 80 }}>
                  <Select.Option value="0">0</Select.Option>
                  <Select.Option value="1">1</Select.Option>
                  <Select.Option value="2">2</Select.Option>
                  <Select.Option value="3">3</Select.Option>
                </Select>
              </div>
            </div>
          </Form.Item>
        </div>

        {/* 3. 最近一周全身健康状况 */}
        <div className={styles.formSection}>
          <Form.Item 
            label={<span className={styles.sectionLabel}><span className={styles.numberBadge}>3</span>最近一周全身健康状况: 0=好, 1=较差, 2=差, 3=很差<span className={styles.required}>*</span></span>} 
            name="generalHealthScore"
            rules={[{ required: true, message: '请填写全身健康状况评分' }]}
          >
            <div className={styles.weeklyGrid}>
              <div className={styles.dayLabels}>
                <span>周一</span>
                <span>周二</span>
                <span>周三</span>
                <span>周四</span>
                <span>周五</span>
                <span>周六</span>
                <span>周日</span>
              </div>
              <div className={styles.inputRow}>
                <span className={styles.inputLabel} style={{width: 40}}>评分</span>
                <Select  style={{ width: 80 }}>
                  <Select.Option value="0">0</Select.Option>
                  <Select.Option value="1">1</Select.Option>
                  <Select.Option value="2">2</Select.Option>
                  <Select.Option value="3">3</Select.Option>
                </Select>
                <Select  style={{ width: 80 }}>
                  <Select.Option value="0">0</Select.Option>
                  <Select.Option value="1">1</Select.Option>
                  <Select.Option value="2">2</Select.Option>
                  <Select.Option value="3">3</Select.Option>
                </Select>
                <Select  style={{ width: 80 }}>
                  <Select.Option value="0">0</Select.Option>
                  <Select.Option value="1">1</Select.Option>
                  <Select.Option value="2">2</Select.Option>
                  <Select.Option value="3">3</Select.Option>
                </Select>
                <Select  style={{ width: 80 }}>
                  <Select.Option value="0">0</Select.Option>
                  <Select.Option value="1">1</Select.Option>
                  <Select.Option value="2">2</Select.Option>
                  <Select.Option value="3">3</Select.Option>
                </Select>
                <Select  style={{ width: 80 }}>
                  <Select.Option value="0">0</Select.Option>
                  <Select.Option value="1">1</Select.Option>
                  <Select.Option value="2">2</Select.Option>
                  <Select.Option value="3">3</Select.Option>
                </Select>
                <Select  style={{ width: 80 }}>
                  <Select.Option value="0">0</Select.Option>
                  <Select.Option value="1">1</Select.Option>
                  <Select.Option value="2">2</Select.Option>
                  <Select.Option value="3">3</Select.Option>
                </Select>
                <Select  style={{ width: 80 }}>
                  <Select.Option value="0">0</Select.Option>
                  <Select.Option value="1">1</Select.Option>
                  <Select.Option value="2">2</Select.Option>
                  <Select.Option value="3">3</Select.Option>
                </Select>
              </div>
            </div>
          </Form.Item>
        </div>

        {/* 4. 是否有下列几种情况 */}
        <div className={styles.formSection}>
          <Form.Item 
            label={<span className={styles.sectionLabel}><span className={styles.numberBadge}>4</span>是否有下列几种情况(0=无, 1=有)<span className={styles.required}>*</span></span>} 
            name="complications"
            rules={[{ required: true, message: '请填写并发症情况' }]}
          >
            <div className={styles.complicationsGrid}>
              <div className={styles.complicationLabels}>
                <span className={styles.complicationPlaceholder} style={{width: 40}}></span>
                <span>关节痛/关节炎</span>
                <span>虹膜炎/色素膜炎</span>
                <span>结节红斑/坏疽性脓皮病/口疮性溃疡</span>
                <span>肛裂/肛瘘/肛周脓肿</span>
                <span>其他瘘管(肠皮瘘、肠-肠瘘)</span>
                <span>过去1周内体温&gt;37.8℃</span>
              </div>
              <div className={styles.complicationInputs}>
                <span className={styles.complicationLabel} style={{width: 40}}>评分</span>
                <Select style={{ width: 120 }}>
                  <Select.Option value="0">0</Select.Option>
                  <Select.Option value="1">1</Select.Option>
                </Select>
                <Select style={{ width: 120 }}>
                  <Select.Option value="0">0</Select.Option>
                  <Select.Option value="1">1</Select.Option>
                </Select>
                <Select style={{ width: 120 }}>
                  <Select.Option value="0">0</Select.Option>
                  <Select.Option value="1">1</Select.Option>
                </Select>
                <Select style={{ width: 120 }}>
                  <Select.Option value="0">0</Select.Option>
                  <Select.Option value="1">1</Select.Option>
                </Select>
                <Select style={{ width: 120 }}>
                  <Select.Option value="0">0</Select.Option>
                  <Select.Option value="1">1</Select.Option>
                </Select>
                <Select style={{ width: 120 }}>
                  <Select.Option value="0">0</Select.Option>
                  <Select.Option value="1">1</Select.Option>
                </Select>
              </div>
            </div>
          </Form.Item>
        </div>

        {/* 5. 是否因腹泻要服苯乙哌啶/阿片类止泻药 */}
        <div className={styles.formSection}>
          <Form.Item 
            label={<span className={styles.sectionLabel}><span className={styles.numberBadge}>5</span>是否因腹泻要服苯乙哌啶/阿片类止泻药<span className={styles.required}>*</span></span>} 
            name="antidiarrhealDrugs"
            rules={[{ required: true, message: '请选择是否服用止泻药' }]}
          >
            <Radio.Group>
              <Radio value="yes">是</Radio>
              <Radio value="no">否</Radio>
            </Radio.Group>
          </Form.Item>
        </div>

        {/* 6. 是否有腹部包块 */}
        <div className={styles.formSection}>
          <Form.Item 
            label={<span className={styles.sectionLabel}><span className={styles.numberBadge}>6</span>是否有腹部包块<span className={styles.required}>*</span></span>} 
            name="abdominalMass"
            rules={[{ required: true, message: '请选择是否有腹部包块' }]}
          >
            <Radio.Group>
              <Radio value="none">无</Radio>
              <Radio value="suspicious">可疑</Radio>
              <Radio value="confirmed">肯定</Radio>
            </Radio.Group>
          </Form.Item>
        </div>

        {/* 7. 红细胞比容(HCT) */}
        <div className={styles.formSection}>
          <Form.Item 
            label={<span className={styles.sectionLabel}><span className={styles.numberBadge}>7</span>红细胞比容(HCT)<span className={styles.required}>*</span></span>} 
            name="hematocrit"
            rules={[{ required: true, message: '请输入红细胞比容' }]}
          >
            <InputNumber style={{ width: 220 }} min={0} max={100} />
          </Form.Item>
        </div>

        {/* 8. 体重 */}
        <div className={styles.formSection}>
          <Form.Item 
            label={<span className={styles.sectionLabel}><span className={styles.numberBadge}>8</span>体重<span className={styles.required}>*</span></span>} 
            name="weight"
            rules={[{ required: true, message: '请输入体重' }]}
          >
            <InputNumber style={{ width: 220 }} min={0} max={500} />
          </Form.Item>
        </div>
      </Form>
      
      <div style={{ textAlign: 'left', marginTop: '24px' }}>
        <CustomButton
          text="提交"
          onClick={() => console.log('提交')}
        />
      </div>
    </div>
  );
};

export default CDAIScore;
